<template>
    <div>
      <template v-if="orderInfo.length!==0">
        <OrderHistoric
            v-for="order in orderInfo"
            :order-info="order"
            @click.native="getOrderDetailByOid(order.oid,order.orderTime,order.pay)">
        </OrderHistoric>
        <!--底部占位-->
        <div class="blockDiv"></div>
        <!--展示订单详情内容-->
        <van-action-sheet
            v-model="orderDetailShow"
            :title="orderDetailTitle">
          <div class="content">
            <OrderDetail
                v-for="dish in orderDetailList"
                :dish-info="dish">
            </OrderDetail>
            <!--内容占位符-->
            <div class="blockDiv"></div>
            <van-submit-bar
                :disabled="payStatus"
                :loading="payLoading"
                :price="orderTotalMoney"
                :button-text="payButtonInfo" @submit="orderPay" />
          </div>
        </van-action-sheet>
      </template>
      <!--空状态-->
      <template v-else>
        <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="你还未下单"
        />
      </template>
    </div>
</template>

<script>
import OrderDetail from "@/components/OrderDetail";
import OrderHistoric from "../components/OrderHistoric";
import {Toast} from "vant";

export default {
        name: "MyOrder",
        components:{
            OrderHistoric,
            OrderDetail
        },
        data(){
            return {
               orderInfo:[{
                   totalMoney: 123,
                   deskName:"一号桌",
                   orderTime:"2012-12-12 13:12:12",
                   pay:true
               }],
              //订单信息展示面板
              orderDetailShow:false,
              //订单详情列表
              orderDetailList:[],
              //订单详情显示标题
              orderDetailTitle:"",
              //支付状态
              payStatus:false,
              //支付加载
              payLoading:false,
              //临时订单信息
              oidItem:0
            }
        },
        computed:{
            userID(){
                return sessionStorage.getItem("userID")
            },
            //订单总金额
            orderTotalMoney(){
                if (this.orderDetailList.length===0)return 0
                let totalMoney=0
                this.orderDetailList.forEach(dish=>{
                    totalMoney+=(dish.number*dish.price);
                });
                return totalMoney*100
            },
            //支付按钮提示信息
            payButtonInfo(){
                if (this.payStatus){
                    return "已完成支付";
                }
                return "去支付"
            }
        },
        methods:{
          //获取订单信息
           async getOrderInfo(){
               const{data:res}=await this.$http.get("/order/findOrdersByUid/"+this.userID);
               if (res.status===200){
                   this.orderInfo=res.data;
               }
            },
            //获取订单详情信息
           async getOrderDetailByOid(oid,title,payStatus){
               const{data:res}=await this.$http.get(`/dish/findDishByOid/${oid}`);
               if (res.status===200){
                 this.orderDetailList=res.data;
                 this.orderDetailTitle="下单时间:"+title;
                 this.oidItem=oid;
                 this.payStatus=payStatus;
                 this.orderDetailShow=true;
               }
            },
            //订单付款
          async orderPay(){
             this.payLoading=true;
              this.$http.put(`/order/payOrder/${this.oidItem}/1`)
                  .then(res=>{
                        if (res.data.status===200){
                            Toast.success("支付成功");
                            this.getOrderInfo();
                            this.orderDetailShow=false;
                            this.payLoading=false;
                        }
                  }).catch(()=>{
                      Toast.fail("支付失败!");
                      this.orderDetailShow=false;
                      this.payLoading=false;
                   });

          }
        }
        ,mounted() {
            this.getOrderInfo()
        }
    }
</script>

<style scoped>
    .blockDiv{
        width: 100%;
        height: 60px;
    }
    /*.custom-image .van-empty__image {
      width: 90px;
      height: 90px;
    }*/
</style>
